<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>

</body>
<script>
    // webStorage   (H5新增 网页存储)
    // WebStorage的目的是克服由cookie所带来的一些限制，当数据需要被严格控制在客户端时，不需要持续的将数据发回服务器。

    // WebStorage两个主要目标：
    // 1.提供一种在cookie之外存储会话数据的路径(一种新的在用户本地 存储数据的方式)
    // 2.提供一种存储大量可以跨会话存在的数据的机制(webStorage也可以跨页面访问)
    // HTML5的WebStorage提供了两种API：localStorage（本地存储）和  sessionStorage（会话存储）   两种存储方式



    // localStorage（本地存储）和  sessionStorage（会话存储）    =>  存在全局对象(window)中  本质(对象)

    // 存的时候也是一条一条存  
    // 也是以键值对形式存在 (对象), 键值只能是字符串(其他类型会转化为字符串)

    // localStorage（本地存储）

    // length   保存数据的数量
    // setItem(key, value) —— 保存数据，以键值对的方式存储信息
    // getItem(key) —— 获取数据，将键值传入，即可获取到对应的value值
    // removeItem(key) —— 删除单个数据，根据键值移除对应的信息
    // clear() —— 删除所有的数据
    // key(index) —— 获取某个索引的key

    // console.log(localStorage);
    // console.log(localStorage.length);   // 保存数据的数量

    var list = [1, 2, 3, 4];
    var obj = { a: 1, b: 2 }

    // 存储数据  
    // 自带的方法
    // localStorage.setItem("user", "a123123");
    // localStorage.setItem("pwd", "123123");
    // // 对象的方法
    // localStorage.phone = "17386141516";
    // localStorage.email = "173861415@qq.com";

    // localStorage.setItem("list", JSON.stringify(list));
    // localStorage.setItem("obj", JSON.stringify(obj));


    // 获取数据
    // var user = localStorage.getItem("user"); // 自带的方法
    // console.log(user);
    // var pwd = localStorage.pwd; //对象的方法
    // console.log(pwd);

    // var str = localStorage.getItem("obj");
    // var obj = JSON.parse(str);
    // console.log(obj);

    // 修改  (对应键名 重新赋值)
    // localStorage.setItem("user", "b123123");
    // localStorage.pwd = '321321';

    // 删除(单删)  对应键名删除
    // localStorage.removeItem("user");
    // localStorage.removeItem("pwd");

    // 删除(全删)
    localStorage.clear();




    console.log(localStorage);
</script>

</html>